<template>
    <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="pagination.page" :page-sizes="pagination.pageSize" :page-size="pagination.size"
            layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" :hide-on-single-page="false"
            small>
        </el-pagination>
    </div>
</template>
<script>
export default {
    name: 'pagination',
    data() {
        return {
            passParams: {}, //向父组件传递的参数
        }
    },
    props: {
        pagination: { //分页
            type: Object,
            require: false,
            default: function () {
                return {
                    page: 1,
                    size: 20,
                    pageSize: [20, 50, 100, 200, 500],
                    total: 0
                }
            }
        },
    },
    methods: {
        handleSizeChange(val) {
            this.pagination.size = val;
            this.passParams.pagination = { ...this.pagination };
            // //子组件调用父组件方法并传参
            // this.$emit('tableInit', this.passParams);
            // 子组件调用祖父组件方法并传参
            this.$parent.$parent.tableInit(this.passParams);
        },
        handleCurrentChange(val) {
            this.pagination.page = val;
            this.passParams.pagination = { ...this.pagination };
            this.$parent.$parent.tableInit(this.passParams);
        },
    }
}
</script>
<style lang="scss" scoped>
//分页样式修改
.pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.pagination :deep .el-pagination {

    span,
    input {
        font-size: 12px !important;
        line-height: 28px !important;
    }

    .el-pager {
        li {
            height: 28px !important;
            line-height: 28px !important;
        }
    }

    .btn-prev,
    .btn-next {
        height: 28px !important;
    }
}
</style>